<template>
	<view>
		<!-- 标题 -->
		<view class="cover">
			<!-- 背景 -->
			<img src="/static/images/beautiful_detail.jpg">

			<!-- 收藏 -->
			<view class="collect">
				<img src="/static/images/collect01.png">
			</view>
			
			<!-- 作者信息 -->
			<view class="title">
				<p>龙门石窟：一场灵魂与身体的旅行</p>
				<view class="writer">
					<img class="name" src="/static/images/head.jpg" />
					<text>麦萌de草泥马</text>
					<text>2016/12/15</text>
				</view>
			</view>
			
			<!-- 回复和点赞 -->
			<view class="leave">
				<view class="comment">
					<navigator url="/YjInfo/comment">
						<img src="/static/images/comment.png">
						<span>148</span>
					</navigator>
				</view>
				<view class="thumb">
					<navigator url="">
						<img src="/static/images/thumb.png">
						<span>48</span>
					</navigator>
				</view>
			</view>

		</view>

		<!-- 正文 -->
		<view class="u-content">
			<u-parse :html="content" :selectable="true"></u-parse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="/static/images/timg.jpg" />
					<p>露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明
					<img src="/static/images/timg.jpg" />露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明</p>
				`,
				
			}
		}
	}
</script>

<style lang="scss">
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
		background: #333;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
	.u-status-bar{
		height: 0 !important;
	}
	.u-navbar-placeholder{
		height: 48px !important;
	}
	.u-navbar-inner{
		margin-right: 0 !important;
	}
	.img{
		margin:0 .8rem;
	}
	u-search{
		width:80%;
	}

	.u-content {
		color: $u-content-color;
		font-size: 32rpx;
		line-height: 1.8;
		margin: 20rpx 20rpx 0 !important;
		padding: 20rpx !important;
		background: $uni-text-color-inverse;

		
		// 标签形式无效
		p {
			color: $u-tips-color;
		}
	}

	.cover{
		position: relative;
		height: 240px;
		width: 100%;
		background-size: cover;

		img {
			margin-top: 5px;
			
			background-size: cover;
			width: 100%;
			height: 100%;
		}
	}

	.collect {
		position: absolute;
		width: 30px;
		height: 30px;
		right: 15px;
		top: 15px;
	}

	.title {
		position: absolute;
		color: $uni-text-color-inverse;
		width: 100%;
		font-size: 22px;
		bottom: 0px;
		padding:5px;
	}

	.writer {
		width: 100%;
		float: left;
		color: $uni-text-color-inverse;
		font-size: 14px;
		line-height: 34px;
		padding-top: 5px;

		text {
			margin-left: 10px;
			color: $uni-text-color-inverse;
		}

		.name {
			float: left;
			border: 2px solid $uni-text-color-inverse;
			width: 30px;
			height: 30px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			box-shadow: 0 0 8px #999999;
		}
	}

	.comment {
		position: fixed;
		bottom: 20px;
		right: 35px;
		background-color: rgba(0,0,0,0.5);
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		width: 40px;
		height: 40px;
		text-align: center;
		

		img {
			margin-top: 10px;
			width: 20px;
			height: 20px;
		}

		span {
			color: $uni-text-color-inverse;
			height: 20px;
			line-height: 20px;
			padding: 0 3px;
			display: block;
			background-color: #33cccc;
			position: fixed;
			bottom: 45px;
			right: 20px;
			font-size: 12px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
	}

	.thumb {
		position: fixed;
		bottom: 20px;
		right: 90px;
		background-color: rgba(0,0,0,0.5);
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		width: 40px;
		height: 40px;
		text-align: center;
		

		span{
			color: $uni-text-color-inverse;
			height: 20px;
			line-height: 20px;
			padding: 0 3px;
			display: block;
			background-color: #33cccc;
			position: fixed;
			bottom: 45px;
			right: 85px;
			font-size: 12px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}

		img{
			margin-top: 10px;
			width: 20px;
			height: 20px;
		}
	}

</style>